<template>
    <view class="container">
       <r-canvas ref="rCanvas"></r-canvas>
	   <view class="btn_copy" @tap.stop.prevent="copyData" :data-content="invite_code">
	   	复制邀请码
	   </view>
	   <view class="btn" @click="save()">
	   	保存海报
	   </view>
    </view>
</template>

<script>
	const app = getApp();
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
// import XqGeneratePoster from '@/components/XQGeneratePoster.vue';
// import XqGeneratePoster from '@/uni_modules/XQ-GeneratePoster/components/XQ-GeneratePoster/XQ-GeneratePoster.vue';
export default {
    // components: { XqGeneratePoster },
	components:{
	        rCanvas
	    },
    data() {
        return {
			tempFilePath: '',
			invite_code:'',//邀请码
			invite_ewm:'',//邀请码注册链接二维码
			invite_url:'',//邀请码注册链接链接,
			invite_num:'',//邀请数量
			haibao: 'https://qiniu.wiod.cn/haibao/haibao.jpg?time=' + new Date().getTime(),
			nickName: uni.getStorageSync('userInfo').nickName
        };
    },
	onShow() {
		this.getPageData()
	},
	onReady(){
		let _this = this
	    this.$nextTick(async ()=>{
	
	        // 初始化
	        await this.$refs.rCanvas.init({
	            canvas_id:"rCanvas",
				background_color: '#fff'
	        })
			await this.$refs.rCanvas.setCanvasWidth(375)
			await this.$refs.rCanvas.setCanvasHeight(531)
	        // 画图
	        await this.$refs.rCanvas.drawImage({
	            url: this.haibao,
	            x:0,
	            y:0,
	            w:375, //375
	            h:531 //630
	        }).catch(err_msg=>{
	            uni.showToast({
	                title:err_msg,
	                icon:"none"
	            })
	        })
			// 画图
			await this.$refs.rCanvas.drawImage({
			    url:_this.invite_ewm,
			    x:20,
			    y:400,
			    w:100, //375
			    h:100 //600
			}).catch(err_msg=>{
			    uni.showToast({
			        title:err_msg,
			        icon:"none"
			    })
			})
	        // 画文字
	        await this.$refs.rCanvas.drawText({
	            text: _this.nickName.slice(0,8)+'...',
	            max_width:0,
	            x:31,
	            y:521,
	            font_color:"rgb(255, 254, 255)",
	            font_size:11
	        }).catch(err_msg=>{
	            uni.showToast({
	                title:err_msg,
	                icon:"none"
	            })
	        })
			await this.$refs.rCanvas.draw((res)=>{
				//res.tempFilePath：生成成功，返回base64图片
				// 保存图片
				this.tempFilePath = res.tempFilePath
			})
	        
	    })
	},
    methods:{
		// 复制数据
		copyData: function(e) {
			uni.setClipboardData({
				data: e.currentTarget.dataset.content
			});
		},
		async save(){
			// 保存图片
			this.$refs.rCanvas.saveImage(this.tempFilePath)
			uni.showToast({
				title: '海报保存成功',
				icon:"success",
				duration: 2000
			})
		},
		// 获取页面数据
		getPageData(){
			let _this = this
			app._get('inviter/basic', {}, res => {
				let data = res.data;
				console.log(data)
				_this.invite_code = data.invite_code;
				_this.invite_ewm = data.invite_url;
				_this.invite_url = 'https://www.btcys.com/pages/login/register?invite_code='+data.invite_code;
				_this.val = 'https://www.btcys.com/pages/login/register?invite_code='+data.invite_code;
				// http://app.liangcang.online/h5/pages/user/invite/index
				_this.invite_num = data.invite_num
			}, null, () => {
				console.log(_this.src)
				
				uni.hideLoading();
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	page{
		// background-color: #000;
	}
.container{
	box-sizing: border-box;
	// min-height: 100vh;
	// padding:110rpx 50rpx 40rpx 50rpx;
	// background:  #000 url('https://qiniu.wiod.cn/detail/userBg.png') 40rpx 117rpx no-repeat;
	// background:  #000;
	// background-size: 710rpx 512rpx;
}
.btn{
	margin: 0 auto;
	width: 80%;
	height: 70rpx;
	// margin-top: 50rpx;
	background: $uni-bg-color-main-linear;
	border-radius: 25rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #000;
	line-height: 70rpx;
	text-align: center;
}
.btn_copy{
	margin: 0 auto;
	width: 80%;
	height: 50rpx;
	margin-top: 10rpx;
	// background: $uni-bg-color-main-linear;
	border-radius: 25rpx;
	font-size: 26rpx;
	// font-weight: 400;
	color: #1a72ff;
	// line-height: 70rpx;
	text-align: center;
}
</style>